<div class="row-fluid">

<div class="span9">
  <div class="hero-unit">
    <div id="images">
      <!--image will insert separately-->  
    </div>
  </div>
</div>

<div class="span3">

  <div id="operation">
    <h4>You can</h4>
    <div class="btn-group">
      <button class="btn btn-inverse" type="button">Add To PI</button>
      <button class="btn btn-inverse" type="button">Get Latest Price</button>
      <button class="btn btn-danger" type="button">Delete</button>
    </div>
    <hr>
  </div>

  <div id="feature">
    <!--feature will insert separately-->
  </div><!--feature div end-->
<hr/>

  <div id="suppliers">
    <h4>Available Suppliers</h4>
    <table>
      <thead>
        <tr>
          <th>supplier name</th>
          <th>price</th>
        </tr>
      </thead>
      <tbody>
        <%
          for ( var i = 0; i < suppliers.length; i++){%>
            <tr>
              <td><%=suppliers[i].suppliername%></td>
              <td><%=suppliers[i].price%></td>
            </tr>
        <%  }
        %>
      </tbody>
    </table>
  </div><!--suppliers div end-->    

</div>

</div><!--row-fluid end-->
